	<template>


		<view class="OrderContainer">

			<!-- 搜索头部 -->
			<button open-type="contact" class="kefu" style="width: 50px;height:50px">
				<image style="width: 20px;height:20px" src="/static/qiao-img/qunzu.png" alt="" />
			</button>
			<div class="header">
				<van-field v-model="searchVal" left-icon="/static/qiao-img/search.png" placeholder="搜索商品"
					@blur="handleInputChange" />

			</div>
			<!-- tab -->
			<view class="tabList">
				<van-tabs ref="tabs" @click="onClickTab" border swipeable title-active-color="green"
					title-inactive-color="gray" sticky line-width="20px">
					<van-tab :title="item" v-for="item in tabArr" :key="item">
					</van-tab>
				</van-tabs>
			</view>
			<!-- 监听滚动事件使用passive修饰符 -->
			<!-- 	    <div class="container" ref="container" @scroll.passive="handleScroll">
		      
		    </div> -->

			<scroll-view ref='list' scroll-y="true" class='list-container' @scroll="handleScroll" style="height: 100vh;">
				<div class="AllOrderList" v-show="AuctionOrdersList.length > 0" ref="container"
					@scroll.passive="handleScroll">
					<div></div>
					<div class='list-phantom' :style="{ height: listHeight + 'px' }"></div>
					<div class='list' :style="{ transform: getTransform }">
						<!--            <div v-for="(item,index) in visibleData" class='list-item' :key='item.id' :style="{height:itemSize+'px',lineHeight:itemSize+'px'}">
                                {{item.value}}
                        </div> -->
						<div>
							<!-- key使用index，可避免多次渲染该dom -->
							<div class="OrderItem" v-for="(item,index) in AuctionOrdersList" :key="index">

								<div class="OrderImg">
									<van-image width="100" height="100" :src="item.imageSrc" />
								</div>
								<div class="OrderCon">
									<div class="">
										<span class="title">{{item.title}}</span>
									</div>
									<div class="">
										<span>类型:单人</span>
									</div>
									<div class="">
										<span>实付款:￥39</span>
									</div>
									<div class="">
										<button class="PayLoadBtn" @click="PayNow(item._id)"
											v-if="CurrentTabTitle==='全部' || CurrentTabTitle=='待付款'">立即支付</button>
										<div class="TobephotographedBtnNav">
											<div class="">
												<button class="refundBtn" @click="refund"
													v-if="CurrentTabTitle==='待拍摄'">退款</button>
											</div>
											<div class="">
												<button class="ViewordersBtn" v-if="CurrentTabTitle==='待拍摄'"
													@click="ShowOrder">查看订单</button>
											</div>
											<div class='jieshuBox'>
												<div class="jieshu">
													<button class="ViewordersBtn" v-if="CurrentTabTitle==='已结束'"
														@click="tiaozhuanPj">评价</button>
												</div>
												<div class="jieshu">
													<button class="ViewordersBtn" v-if="CurrentTabTitle==='已结束'"
														@click="TuiKuan">退款</button>
												</div>
												<div class="jieshu">
													<button class="ViewordersBtn"
														v-if="CurrentTabTitle==='已结束'">删除订单</button>
												</div>
											</div>
											<!--售后Box -->
											<div v-if="CurrentTabTitle==='售后'">
												<button @click="TiaoZhuanGoodsSta(item.GoodsSta,$event)"
													class="shouhoubtn">{{item.GoodsSta}}</button>
												<div v-if="CurrentTabTitle==='售后'">
													<button v-if="CurrentTabTitle==='售后'" class="shouhoubtn">删除订单</button>
												</div>

											</div>


										</div>

									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</scroll-view>
		</view>
	</template>

	<script lang="ts">
	// import axios from 'axios';
	import { computed, onMounted, reactive, ref } from 'vue'
	import request from '../../utils/request.js'
	export default {
		onLoad(options) {
			console.log(options.CurrentTabTitle, 'OrderOption')
			// console.log(this.CurrentTabTitle)
			// this.CurrentTabTitle= options.CurrentTabTitle
		},
		setup() {
			let screenHeight = ref()
			let startOffset = ref()
			let startIndex = ref()
			let endIndex = ref()
			let itemSize = ref(10)
			let curBtnSta = ref("")
			let tabs = ref()
			// 搜索的数据
			let searchVal = ref("")
			// 当前的tabtitle
			let CurrentTabTitle = ref("全部") //全部是所有的数据

			const getScreenHeight = () => {
				uni.getSystemInfo({
					success: function (res) {
						screenHeight.value = res.screenHeight
					}
				});
			}
			const visibleCount = computed(() => {

				return Math.ceil(screenHeight.value / itemSize.value)

			})
			const listHeight = () => {
				return AuctionOrdersList.value.length * itemSize.value;
			}
			const getTransform = () => {
				return `translate3d(0,${startOffset.value}px,0)`;

			}
			const visibleData = () => {
				return AuctionOrdersList.value.slice(startIndex.value, Math.min(endIndex.value, AuctionOrdersList.value.length));
			}
			onMounted(() => {
				getScreenHeight()
				startIndex.value = 0;
				endIndex.value = startIndex.value + visibleCount.value;

			})
			const handleScroll = (e) => {
				//当前滚动位置
				let scrollTop = e.detail.scrollTop;
				//开始索引
				startIndex.value = Math.floor(scrollTop / itemSize.value);
				//结束索引
				endIndex.value = startIndex.value + visibleCount.value;
				//顶部偏移量
				startOffset.value = scrollTop - (scrollTop % itemSize.value);
			}
			// 立即支付的函数
			const PayNow = (_id) => {
				uni.navigateTo({ url: `/pages/PayNow/PayNow?_id=${_id}` })
			}
			const handleInputChange = (e) => {
				searchVal.value = e.detail.value
				// console.log(searchVal.value) 
			}
			// 定义一个tab栏的数组
			let tabArr = reactive(['全部', '待付款', '待拍摄', '售后', '已结束'])
			// 定义一个约拍数组
			let AuctionOrdersList = ref([])
			let active = ref(0);
			const onClickTab = async () => {
				// console.log('已经被触发')
				let tabsList = tabs.value.data.tabs
				let currentIndex = tabs.value.data.currentIndex
				CurrentTabTitle.value = tabsList[currentIndex].title
				console.log(CurrentTabTitle.value)
				let { data } = await request(`getAuctionOrdersListByTabTitle?title=${CurrentTabTitle.value}`)
				console.log(data.data, 'res')
				AuctionOrdersList.value = data.data
				// console.log(tabsList[currentIndex].title,'currentItem')

			};
			// 获取订单列表数据
			const getAuctionOrders = async () => {
				let { data } = await request('getAuctionOrdersList')
				AuctionOrdersList.value = data.data
				// console.log(AuctionOrdersList,'AuctionOrdersList----------------')

			}
			onMounted(() => {
				getAuctionOrders()
			})
			// 退款
			const refund = () => {
				// 跳转到退款页面
				uni.navigateTo({ url: '/pages/CheckoutSuccess/CheckSuccess' })



			}
			// 查看订单
			const ViewOrders = () => {

			}
			const tiaozhuanPj = () => {
				uni.navigateTo({
					url: '/pages/evaluate/evaluate'
				})
			}
			const TuiKuan = () => {
				uni.navigateTo({
					url: '/pages/TuiKuan/TuiKuan'
				})

			}
			const TiaoZhuanGoodsSta = (GoodsSta, ev) => {
				console.log(GoodsSta)
				curBtnSta.value = GoodsSta
				if (GoodsSta == '等待商家确认') {
					uni.navigateTo({
						url: "/pages/Refundrequesthasbeensubmittedwaitingformerchantconfirmation/Refundrequesthasbeensubmittedwaitingformerchantconfirmation"
					})
				} else if (GoodsSta == '商家拒绝退款，点击可查看详估') {
					// pages/GoodsJujueTuiKuan/GoodsJujue
					uni.navigateTo({
						url: "/pages/GoodsJujueTuiKuan/GoodsJujue"
					})

				} else if (GoodsSta == '售后已取消') {
					uni.navigateTo({
						url: "/pages/TuiKuanShenQingQuXiao/TuikuanShenQingYiQuXiao"
					})

				} else if (GoodsSta == '退款成功，退款金额已返回') {
					uni.navigateTo({
						url: "/pages/TuiKuanChengGong/TuiKuanChengGong"
					})

				}

			}
			const ShowOrder = () => {
				uni.navigateTo({
					url: '/pages/CheckoutSuccess/CheckSuccess'
				})
			}
			return {
				ShowOrder,
				TiaoZhuanGoodsSta,
				getTransform,
				visibleData,
				startOffset,
				startIndex,
				endIndex,
				getScreenHeight,

				listHeight,
				curBtnSta,
				tabs,
				searchVal,
				CurrentTabTitle,
				PayNow,
				handleInputChange,
				tabArr,
				AuctionOrdersList,
				active,
				onClickTab,
				getAuctionOrders,
				refund,
				ViewOrders,
				tiaozhuanPj,
				TuiKuan

			}
		}

	}
	</script>

	<style scoped>
		.AllOrderList {
			width: 470px;
			height: 180px;
		}

		.OrderItem {
			height: 100%;
			/* border: 2px solid red; */
			margin-bottom: 20px;
			display: flex;
			position: relative;
		}

		.OrderImg {
			width: 100px;
			height: 100%;
			flex: 0.5;
			text-align: center;
			margin-top: 20px;
			/* border: 2px solid blue; */
		}

		.OrderCon {
			flex: 1;
			align-self: center;
			margin-left: 25px;
			line-height: 30px;

		}

		.PayLoadBtn,
		.refundBtn,
		.ViewordersBtn {
			width: 100px;
			font-size: 12px;
			border: 1px solid black;
			margin-top: 30px;
		}

		.TobephotographedBtnNav {
			display: flex;
			margin-right: 10px;
		}

		.kefu {
			/* position: absolute; */
			top: 10px;
			right: 30px !important;
			float: right;
		}

		.jieshuBox {
			padding: 10px;
			/* border:1px solid red; */
			display: flex;
			margin-left: -45px;
			justify-content: space-between;
			align-items: center;

		}

		.jieshu button {
			width: 75px;
			font-size: 10px;
			margin-right: 10px;
		}

		.shouhoubtn {
			font-size: 12px;
		}
	</style>